<template>
    <div class="home">
        <cascader v-model="city" :show_all_levels="false" style="width:300px" @select="getData" :options="cityList">
        </cascader>
        <el-divider></el-divider>
        <el-input label="sheet名字" v-model="sheetName" placeholder="输入sheet名字"></el-input>
        <el-upload :before-upload="fileUpload" accept=".xlsx,.xls">
            <el-button type="primary">选择文件</el-button>
        </el-upload>

        <el-button @click="handlerDebounce" type="danger">点击防抖</el-button>
    </div>
</template>
<script setup lang="ts">
import cascader from "@/components/cascader/index.vue";
import { ref } from "vue";
import { readExcelFile } from "@/utils/ExcelHelper";
import { debounce } from "@/utils/tools";

const sheetName = ref("");

//执行excel文件上传处理逻辑
const fileUpload = async (file: Object) => {
    console.log("xxxx");
    const excelData = await readExcelFile(file, sheetName.value);
    console.log(excelData);
    return false;
}
//其他内容效果展示
const city = ref("");
const getData = (data) => {
    console.log(data, "获取选择数据")
}
const cityList: any = ref([
    {
        label: "山东",
        value: 1,
        children: [
            { label: "济南", value: 4, children: [{ label: "历下区", value: 13 }, { label: "市中区", value: 14 }] },
            { label: "青岛", value: 5 },
            { label: "威海", value: 6 },
        ]
    },
    {
        label: "河南",
        value: 2,
        children: [
            { label: "郑州", value: 7 },
            { label: "洛阳", value: 8 },
            { label: "濮阳", value: 9 },
        ]
    },
    {
        label: "河北",
        value: 3,
        children: [
            { label: "石家庄", value: 10 },
            { label: "保定", value: 11 },
            { label: "邯郸", value: 12 },
        ]
    },
    {
        label: "北京",
        value: 16,
    }
])

const handlerDebounce = () => {
    debounce((args)=>{
        console.log("点击事件触发");
    },5000,true)("hello 防抖")
}



</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    min-height: 40vw;
    // background: #FAFAFA;
}
</style>